<template>
	<view>
		<view class="music" :class="state ? 'on' : ''" @tap="play" v-if="music">
			<text class="active active-yinle"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'music',
		props: {
			music: null
		},
		data() {
			return {
				state: false,
				audio: null,
			};
		},
		created() {
			if (this.music) {
				if (!getApp().globalData.audio) {
					getApp().globalData.audio = uni.createInnerAudioContext({});
					getApp().globalData.audio.name = this.music.name;
					getApp().globalData.audio.author = this.music.author;
					getApp().globalData.audio.src = this.music.url;
					getApp().globalData.audio.loop = true;
					
					// this.$jweixin.config({
					// 	debug: false,
					// 	appId: '', // 必填，公众号的唯一标识
					// 	timestamp: '', // 必填，生成res.data.nonceStr, // 必填，生成签名的随机串
					// 	signature: '',
					// 	jsApiList: []
					// })
					// this.$jweixin.ready(function(){
					// 	getApp().globalData.audio.play();
					// })
					getApp().globalData.audio.play();
					this.state = true
				} else {
					if(getApp().globalData.audio.src != this.music.url){
						getApp().globalData.audio.pause()
						this.audio = uni.createInnerAudioContext({});
						this.audio.name = this.music.name;
						this.audio.name = this.music.name;
						this.audio.author = this.music.author;
						this.audio.src = this.music.url;
						this.audio.loop = true;
						this.audio.play();
						this.state = true
					}else{
						if (getApp().globalData.audio.src) {
							this.state = true
							getApp().globalData.audio.play();
						}
					}
					
				}
			}
		},
		// destroyed() {
		// 	if(getApp().globalData.audio){
		// 		getApp().globalData.audio.destroy();
		// 		getApp().globalData.audio = null;
		// 	}
		// },
		methods: {
			play() {
				if (this.state) {
					getApp().globalData.audio.pause();
				} else{
					getApp().globalData.audio.play();
				} 
				this.state = !this.state;
			},
			stop(){
				if(this.audio){
					this.audio.destroy();
					this.audio = null;
					getApp().globalData.audio.play();
				}
			}
		}
	};
</script>

<style>
	.music {
		display: inline-block;
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		top: 150rpx;
		left: 50rpx;
		z-index: 999999;
		-webkit-animation-iteration-count: infinite;
	}

	.music text {
		font-size: 40px;
		color: #f2f2f2;
	}

	.on {
		animation: rotating 4s linear infinite;
	}

	@keyframes rotating {
		0% {
			transform: rotateZ(0);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}
</style>
